<include file="public/head"/>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a style="cursor: pointer;font-weight: bold;"
                              href="{:url('/plugin/auto_code/admin_index/index')}">返回上一级</a></li>
    </ul>
    <form class="well form-inline margin-top-20">
        父级菜单:
        <select id="menu" class="form-control" name="menu" style="width:160px;">
            <option value="">-&#45;&#45; 顶级菜单 -&#45;&#45;</option>
            {$category}
        </select>
        菜单名称:
        <input id="menu_name" placeholder="" type="text" class="form-control"
               style="width:180px;display: inline-block;">
        &nbsp;&nbsp;
        控制器:
        <input id="controller" placeholder="控制器名称:如Person" type="text" class="form-control"
               style="width:180px;display: inline-block;">
        <a onclick="gen()" class="btn btn-danger" href="#">生成</a>
    </form>
    <table class="table table-bordered table-hover" style="font-size:14px;">
        <thead>
        <tr>
            <th><input checked type="checkbox" id="chAll" onchange="chAll(this)"></th>
            <th>字段名</th>
            <th>备注</th>
            <th>是否null</th>
            <th>组件类型</th>
        </tr>
        </thead>
        <tbody>
        <volist name="columns" id="ta">
            <tr>
                <td><input data-name="{:$ta.COLUMN_NAME=='id'?'ID':$ta.COLUMN_COMMENT}" data-value="{$ta.COLUMN_NAME}"
                           type="checkbox" class="ck"
                           checked onchange="ckSelected(this)" value="{$ta.COLUMN_NAME}"/>
                </td>
                <td>{$ta.COLUMN_NAME}</td>
                <td style="width:200px;">
                    <input id="v_{$ta.COLUMN_NAME}" type="text" class="form-control"
                           value="{:$ta.COLUMN_NAME=='id'?'ID':$ta.COLUMN_COMMENT}">
                </td>
                <td>
                    <if $ta.IS_NULLABLE!="NO"><span style="color:dodgerblue;">null</span>
                        <else/>
                        否
                    </if>
                </td>
                <td style="width:240px;">
                    <select class="form-control" style="display: inline-block;width:55%;" id="c_{$ta.COLUMN_NAME}">
                        <volist name="componentArr" id="vo">
                            <option value="{$key}">{$vo.tip}</option>
                        </volist>
                    </select>&nbsp;
                    <button onclick="cSetting('{$ta.COLUMN_NAME}')" type="button" class="btn btn-primary"
                            style="display: inline-block;">
                        设置
                    </button>
                </td>
            </tr>
        </volist>
        </tbody>
    </table>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/layer/layer.js"></script>
<script>
    //全局变量
    let globalIndex = 1;

    function chAll(obj) {
        let checked = $(obj).prop('checked');
        $('.ck').prop('checked', checked);
    }

    function checkAllCk() {
        let checked = true;
        $('.ck').each(function () {
            if ($(this).prop('checked') == false) {
                checked = false
            }
        });

        return {allChecked: checked};
    }

    function ckSelected(obj) {
        let checked = $(obj).prop('checked');

        let result = checkAllCk();

        if (result.allChecked) {
            $('#chAll').prop('checked', true);
        } else {
            $('#chAll').prop('checked', false);
        }
    }

    /**
     * 生成代码
     */
    function gen() {
        // let result = checkAllCk();
        let gen_result = [];
        let table_name = '{:input(\'request.table_name/s\')}';
        let menu_id = $('#menu').val();
        let menu_name = $('#menu_name').val();

        if (!table_name) {
            layer.msg('表不存在');
            return;
        }

        if (!menu_name) {
            layer.msg('菜单名不能为空');
            return;
        }

        $('input[class="ck"]:checked').each(function () {
            let type = $('#c_' + $(this).data('value')).val();
            let obj = $(this);
            let field_value = obj.data('value');
            let field_name = $('#v_' + field_value).val().trim();

            gen_result.push({
                type: type,
                field_value: field_value,
                field_name: field_name,
                ...(settingResult[field_value] ? settingResult[field_value] : {
                    model: '',
                    checked: [],
                    value: [],
                    textOverflow: false
                })
            });
        });

        if (gen_result.length < 1) {
            layer.msg('请先选择');
            return;
        }

        $.ajax({
            type: 'post',
            url: '{:url("/plugin/auto_code/Auto/gen")}',
            data: {
                menu_id: menu_id,
                menu_name: menu_name,
                info: JSON.stringify(gen_result),
                controller: $('#controller').val().trim(),
                model: table_name
            },
            success(res) {
                if (res.code == 1) {
                    layer.msg('生成成功');
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

    /**
     * 增加项
     * */
    function addItem(id) {
        let itemTpl = `<p style="text-align: center;"><input class="c_ck" type="checkbox">&nbsp;&nbsp;<input class="form-control" style="width:50%;display: inline-block;" type="text" class="c_xz" /></p>`;

        $('#' + id).append(itemTpl);
    }

    /**
     * 删除项
     * */
    function delItem(id) {

        $('#' + id).children().eq(-1).remove();
    }

    /**
     * 组件设置
     */
    let settingResult = {};

    function cSetting(name) {
        let type = $('#c_' + name).val();
        let tpl = '';

        if (type == 'checkbox' || type == 'selectedBox') { //单选 - 多选
            // tpl += `<div id="c_container">
            //            </div><p style="text-align: center;"><button type="button" class="btn btn-xs btn-success" onclick="addItem('c_container')">新增项</button>&nbsp;&nbsp;
            //         <button type="button" class="btn btn-xs btn-danger" onclick="delItem('c_container')">删除项</button></p>`;
            tpl = `
                    <div class="left" style="width:30%;float:left;text-align: right;">
                        <p style="line-height: 34px;">sql数据源:&nbsp;&nbsp;</p>
                        <p style="line-height: 34px;">选项配置:&nbsp;&nbsp;</p>
                    </div>
                    <div class="right" style="width:70%;float: left;text-align: left;">
                    <p><input id="sql" style="width:80%;" type="text" class="form-control" placeholder="sql:如select id,xxx from cmf_xxx"></p>
                    <p>
                        <button id="appendItem" type="button" class="btn btn-xs btn-success">追加</button>&nbsp;
                        <button id="removeItem" type="button" class="btn btn-xs btn-danger">删除</button>
                    </p>
                    <div style="line-height: 40px;">
                     键名(key)：&nbsp;&nbsp;&nbsp;
                        <input style="width:60%;display: inline-block;" type="text" class="form-control itemKey0" placeholder="" value="0"><br/>
                        键值(value)：
                        <input style="width:60%;display: inline-block;" type="text" class="form-control itemValue" placeholder="">
                        <hr style="margin: 0;"/>
                    </div>
                    <p id="itemContainer"></p>
                    </div>
                    `;
        } else if (type == 'text') {
            tpl = `
                    <p style="text-align: left;"><input type="checkbox" id="c_ck">&nbsp;&nbsp;<label for="c_ck">是否溢出隐藏</label></p>
                    <p style="text-align: left;"><label>placeHolder文本</label>&nbsp;&nbsp;<input class="form-control" style="width:60%;display: inline-block;" type="text" id="pt"></p>
                    `;
        }

        layer.open({
            title: '设置',
            area: ['50%', '100%'],
            content: tpl,
            success(index, no) {
                if (type == 'checkbox' || type == 'selectedBox') {
                    //添加
                    $('#appendItem').click(function () {
                        let tpl = `        <div style="line-height: 40px;">
                     键名(key)：&nbsp;&nbsp;&nbsp;
                        <input style="width:60%;display: inline-block;" type="text" class="form-control itemKey${globalIndex}" placeholder="" value="${globalIndex}"><br/>
                        键值(value)：
                        <input style="width:60%;display: inline-block;" type="text" class="form-control itemValue" placeholder="">
                        <hr style="margin: 0;"/>
                    </div>
                                    `;
                        $('#itemContainer').append(tpl);

                        globalIndex++;
                    });
                    //删除
                    $('#removeItem').click(function () {
                        $('#itemContainer div:last').remove();
                        globalIndex < 2 || globalIndex--;
                    });
                }
            },
            yes(index, no) {
                settingResult[name] = {model: {sql: '', tpl: ''}, checked: [], value: [], textOverflow: false,placeHolderText: ''};
                //单选|多选设置参数
                if (type == 'checkbox' || type == 'selectedBox') {
                    // $('input[class="c_ck"]').each(function () {
                    //     let val = $(this).sibling('input').val();
                    //     let isChecked = $(this).prop('checked');
                    //
                    //     if (isChecked) {
                    //         settingResult[type].checked.push([{name: val, checked: isChecked}]);
                    //     }
                    //
                    //     settingResult[type].value.push(val);
                    // });
                    let itemArr = [];
                    $('.itemValue').each(function (k) {

                        itemArr.push({key: $('.itemKey' + k).val().trim(), value: $(this).val().trim()});
                    });

                    settingResult[name].model.sql = $('#sql').val();
                    settingResult[name].model.tpl = JSON.stringify(itemArr);
                } else if (type == 'text') { //文本框
                    let checked = $('#c_ck').prop('checked');
                    settingResult[name].textOverflow = checked;
                    settingResult[name].placeHolderText = $('#pt').val().trim();
                }

                layer.msg('设置成功');
                layer.close(index);
            }
        });
    }

</script>
</body>
</html>